<template>
  <a-range-picker @change="onChange" :default-value="[startData, endData]" :placeholder="['开始日期', '结束日期']" />



  <div class="echart-pic">
    <a-spin :spinning="spinning1" />
    <div class="about" id="main"></div>
  </div>






  <a-table :columns="columns" :data-source="data" :scroll="{ x: 1500, y: 300 }" :rowKey="(record, index) => { return index }">
  </a-table>
</template>
<script>
import { request } from "../../utils/request";
import moment from 'moment'
const columns = [
  {
    title: '姓名',
    dataIndex: 'product',
    key: '姓名',
  },
  {
    title: '部门',
    dataIndex: 'bumen',
    key: '部门',
  },
  {
    title: '天数清算',
    dataIndex: '天数清算',
    key: '天数清算',
  },
  {
    title: '交通费清算',
    dataIndex: '交通费清算',
    key: '交通费清算',
  },
  {
    title: '招待费清算',
    dataIndex: '招待费清算',
    key: '招待费清算',
  },
  {
    title: '伙食补助清算',
    dataIndex: '伙食补助清算',
    key: '伙食补助清算',
  },
  {
    title: '住宿费清算',
    dataIndex: '住宿费清算',
    key: '住宿费清算',
  },
  {
    title: '合计清算',
    dataIndex: '合计清算',
    key: '合计清算',
  },
];

const data = [
  {

    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',

  },
  {

    姓名: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',

  },
  {

    姓名: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',

  },
];

export default ({
  data() {
    return {
      source: [],
      data,
      columns,
      dateFormat: 'YYYY-MM-DD',
      startData: '2016-06-08',
      endData: moment().format("YYYY-MM-DD"),
      spinning1: true,
    }
  },
  methods: {

    getData(startData, endData) {
      request({
        url: 'business/findAll',
        data: {
          startData: startData,
          endData: endData
        },
        method: "post"
      }).then((res) => {
        if (res.code == 200) {
          this.source = [];
          res.data.forEach((e, index) => {
            this.source.push({
              key: index,
              product: e.lastname,
              bumen: e.departmentname,
              '天数清算': e.tsqs,
              '交通费清算': e.jtfqs,
              '招待费清算': e.zdfqs,
              '伙食补助清算': e.hsbzqs,
              '住宿费清算': e.zsfqs,
              '合计清算': e.hjqs
            })
          });
          this.echart(this.source)
          this.data = this.source
          console.log(this.data, "data")
        }

      })
    },
    echart(data) {

      this.spinning1 = false;
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main"));
      // 绘制图表
      myChart.setOption({
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: ['product', '天数清算', '交通费清算', '招待费清算', '伙食补助清算',
            '住宿费清算', '合计清算'],
          source: data

        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          { type: 'bar' },
          { type: 'bar' },
          { type: 'bar' },
          { type: 'bar' },
          { type: 'bar' },
          { type: 'bar' }
        ]
      });
    },
    onChange(date, dateString) {
      this.startData = dateString[0];
      this.endData = dateString[1];
      this.spinning1 = true;
      this.getData(this.startData, this.endData);
    },
  },
  mounted() {
    this.getData(this.startData, this.endData);
  }
})
</script>
<style lang="scss" scoped>
#main {
  height: 400px;
  width: 100%;
}

.echart-pic {
  height: 400px;
  width: 100%;
  line-height: 400px;
  text-align: center;
}
</style>
